<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String msg =String.valueOf(request.getAttribute("msg"));
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>商户网点管理</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
	<link href="css/index.css" rel="stylesheet" type="text/css"/>
	
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> 
	<script type="text/javascript" src="js/grid.jqueryui.js"></script>
	<script type="text/javascript" src="js/grid.locale-cn.js"></script>
    <script type="text/javascript" src="js/jquery.hoverIntent.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/layer.ext.js"></script>
		<script type="text/javascript" src="js/layer.min.js"></script>
	

  <script type="text/javascript">		
$(function () {    
  //  loadtitle();   
    initGrid();
});
/*
下面一段代码initGrid()的作用是初始化一个jqGrid表格
其中，list1是body中的一个table元素，初始化时不添加任何表格项，将这个元素赋给jqGrid，它会自动其上构建表格
page是一个div元素，同理用于jqGrid生成表格的Pager部分
jqGrid自动向后台传递一些参数，后台利用这些参数来获得所需的数据并返回给jqGrid
jqGrid只负责传递这些参数和显示返回的数据，不负责业务逻辑处理和检查返回的内容是否语义上正确
*/
function initGrid() {
    var colNames = ['商户ID', '商户名称', '商户类型','商户区域', '商户经度', '商户纬度', '操作'];//显示在表格上方的列名
    var colModel = [
        {name: 'comId', index: 'comId', align: 'center', title: false, sortable: true,
        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
		edittype:'text',
		editoptions:{size:10},
		editrules:{required:true},//（程序上）
		formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
		},
        {name: 'comName', index: 'comName', align: 'center', title: false, sortable: true,
        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
		edittype:'text',
		editoptions:{size:10},
		editrules:{required:true},//（程序上）
		formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
		},
		{name: 'comType', index: 'comType', align: 'center', title: false, sortable: true,
        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
		edittype:'text',
		editoptions:{size:10},
		editrules:{required:true},//（程序上）
		formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
		},
		{name: 'comArea', index: 'comArea', align: 'center', title: false, sortable: true,
        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
		edittype:'text',
		editoptions:{size:10},
		editrules:{required:true},//（程序上）
		formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
		},
		{name: 'comLat', index: 'comLat', align: 'center', title: false, sortable: true,
	        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
			edittype:'text',
			editoptions:{size:10},
			editrules:{required:true},//（程序上）
			formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
			},
		{name: 'comLng', index: 'comLng', align: 'center', title: false, sortable: true,
		    editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
			edittype:'text',
			editoptions:{size:10},
			editrules:{required:true},//（程序上）
			formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
				},
        {name:'act',index:'act',width:200,search:false,align: 'center',sortable:false,editable:false}
    ];
    $('#list1').jqGrid({
    	caption:"<font size='3'>商户信息</font>", //表格标题
        url: "manage/queryCompany.html",//获得表格数据的后台地址，这个地址用来处理ajax请求，只将数据写到response的输出中，并不返回视图
        mtype:"post",//ajax请求方式为post
        datatype: "json",//数据格式为json，jqGrid也支持xml
        width: 1200,
        height: "auto",
        shrinkToFit: true,//自动调整宽高
        altRows: false,//表格列显示时是否背景颜色交替(调整为true再看一下效果)
        gridview: true,
        multiselect: true,//有没有多选框
        multiselectWidth: 25,
        colNames: colNames,
        colModel: colModel,
        pager: "#page1",
        pgbuttons:true,
		pginput:true,
        rowNum: 20,//一页显示记录数
        sortname: "comId",//初始化显示时，排序的列名
        sortorder: "asc",//排序的方式
        viewrecords: true,//是否在pager上显示总记录数
        toolbar:[true,"top"],
        prmNames: {sort: "mysort",order:"myorder",search:"mysearch"},//修改默认传递到后台的参数的名称
        gridComplete: function(){
                var ids = $("#list1").getDataIDs();//jqGrid('getDataIDs');
                for(var i=0;i<ids.length;i++){
                    var cl = ids[i];//为第三列表格项添加内容，即修改和删除链接,editGridRow是jqGrid的函数，直接用就可以
                    be = "<a href=\"javascript:void(0)\" onclick=\"jQuery('#list1').jqGrid('editGridRow','"+cl+"',{checkOnSubmit:true,checkOnUpdate:true,closeAfterEdit:true,closeOnEscape:true});\">编辑</a>"; 
                    de = "<a href=\"javascript:void(0)\" onclick=\"multidel('"+cl+"')\">删除</a>";
                 //   le = "<a href=\"javascript:void(0)\" onclick=\"resetpassword('"+cl+"')\">重置密码</a>";
                  var datarow ={act:be+"  "+de};
                    jQuery("#list1").jqGrid('setRowData',ids[i],datarow);
                }
            },
        editurl:'manage/jqgridedit.html',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            id:"comId",
            repeatitems: false,
        }
    });
    $("#t_list1").append("<div style='padding:5px;text-align:left'><input type='button' class='jqgridbtn' value='批量删除' onclick='multidel()' />&nbsp;&nbsp;<input type='button' class='jqgridbtn' value='添加商户' onclick='addCompany()' />&nbsp;&nbsp;</div>");	      
}

var addCompany = function() {
    jQuery("#list1").jqGrid("editGridRow","new",{reloadAfterSubmit:true,closeAfterAdd:true,closeOnEscape:true});
};



function multidel(cl)
{
	var delids = jQuery("#list1").jqGrid('getGridParam','selarrrow');
	var prompt = "确定要删除：";
	function excutedel()//执行删除动作的函数
	{
		cl?id = cl:id = delids.join(",");    
		$.ajax({
				url:"manage/jqgridedit.html",//此处为删除的链接
				type:"post",
				dataType:"json",
				data:{id:id,oper:"del"},
				success:function(data){
				$("#list1").jqGrid().trigger("reloadGrid");
				layer.alert("删除成功",9);
				},
				error:function(){
				}
		});
	}
	if(delids != "")//如果要删除的条目不为空，提示用户要删除哪些条目
	{
		for(var i=0;i<delids.length&&i<3;i++)//循环，做拼接，当条目数大于3时，提示只显示前三条的具体信息，注意，你这里要提示用户被删除的姓名，因此[]里面填Name
		{
			prompt += "<br/>&nbsp;"+ $('#list1').jqGrid('getRowData',delids[i])['comName'];
		}
		if(delids.length>3)
		prompt += "<br/>……<br/>等 " +delids.length+ " 条记录吗？";
		else
		prompt += "<br/>这 " +delids.length+ " 条记录吗？";
		$.layer({title:'删除记录',dialog:{type:3,msg:prompt,btns:2,yes:function(){excutedel();}}});//触发layer的提示函数，如果选择确定，则执行excutedel
	}
	else if(cl == undefined)
	$.layer({title:'提示',dialog:{type:5,msg:'请选择要删除的条目!'}});
	else//这里对应的是删除单条信息，被绑在每一条后面的“删除”链接上
	{
		prompt += "<br/>&nbsp;" + $('#list1').jqGrid('getRowData',cl)['comName'];
		prompt += "<br/>这条记录吗？";
		$.layer({title:'删除记录',dialog:{type:3,msg:prompt,btns:2,yes:function(){excutedel();}}});
	}
	
}
	



	function a(){
	if(document.getElementById("msg").value!="null")
		alert(document.getElementById("msg").value);
	}
	
</script>
</head>
<body onload="a()">

<div class="display-container"> 
	
 		<div class="content-container">
		<div class="content">
   
<input type="hidden" id="msg" value="<%=msg%>"/>
  <table id="list1"></table>
  <div id="page1"></div>
		</div>
		</div>
		<div style="clear:both;"></div>
		</div>
</body>
</html>
